<html>
<head>
<title>Game Chooser</title>
<style type="text/css">
div.gamelist {
  border-style: solid;
  border-width: 1px;
  width: 95%;
  min-height: 100px;
  padding: 5px
}
.bgglink {
  color: #000000;
  text-decoration: none;
}
A:hover.bgglink { text-decoration: underline; }
</style>

</head>
<body>

<script type="text/javascript"
src="https://www.google.com/jsapi?key=ABQIAAAAezlCDIPR94tIIKc9Bn1GXRR-qvrT2_zjIop2DGH6nDFrh2kU9xQ5FbnejqHQmA-igQdGlXjZt9sWHA"
></script>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"
></script>
<script type="text/javascript">
bgguser=""

function ChangeUser(user) {
  bgguser = user;
  UpdateFrame()
}

// This really handles all the magic from the form.
function UpdateFrame(full) {
 // first username. If blank, then we have nothing.
  var f = document.getElementById("gamelist");
//  f.innerHTML = "Updating...";

  var user_text = document.getElementById("bgguser");
  var user_list = document.getElementById("bgguserlist");
  bgguser = ""
  if (user_text.value) {
    bgguser = user_text.value;
  } else if (user_list.value != "") {
    bgguser = user_list.value;
  }

  // There's nothing useful to be done in this case.
  if (bgguser == "") {
    return;
  }

  var url = "/choose?output=json&" + "bgguser=" + bgguser;

  var best_with = document.getElementById("bestwith").value;
  if (best_with) {
    url = url + "&bestwith=" + best_with;
  }

  var rec_with = document.getElementById("recwith").value;
  if (rec_with) {
    url = url + "&recwith=" + rec_with;
  }

  var play_time = document.getElementById("playtime").value;
  if (play_time) {
    url = url + "&time=" + play_time;
  }

  var weight = document.getElementById("weight").value;
  if (weight) {
    url = url + "&weight=" + weight;
  }

  if (typeof(full) != 'undefined') {
    url = url + "&full"
  }


  $.getJSON(url, function(data) {
   var f = document.getElementById("gamelist");
//   f.innerHTML = "Here"
   if (data.error) {
      f.innerHTML = data.error;
    } else {
      BuildTable(data);
    }
  });
}

function BuildTable(data) {
  var f = document.getElementById("gamelist");
  var columnlist = [ "bgg_rating", "user_rating", "play_time"];
  // name, id handled separately.
  var tablelines = [];
  var line;

  tablelines.push('<table class="gt">');
  tablelines.push('<tr><th class="gh">BGG<th class="gh">' +
    'You<th class="gh">Time<th class="gh">Game Name');

  // build and format a single game row.
  for (var i = 0; i < data.games.length; i++) {
    line = "<tr>";
    for (var j = 0; j < columnlist.length; j++) {
       line += '<td class="gd"> ' + data.games[i][columnlist[j]];
    }
    line += '<td class="gd"> <a href="http://www.boardgamegeek.com/boardgame/' +
         data.games[i]["id"] + '" class="bgglink" target="bggframe" >' +
         data.games[i]["name"] + '</a>';

    tablelines.push(line);
  }
  tablelines.push("</table>")
  if (data.num_games > data.games.length) {
    tablelines.push(
       '<a href="javascript:UpdateFrame(1)">...more results...</a>');
  }
 f.innerHTML = tablelines.join("\n")
}

function ClearNameText() {
  // clears the name input box selection.
  var user_text = document.getElementById("bgguser");
  user_text.value = "";
}

</script>

<table>
<tr><td>
<td>BGG User<br>
<form onsubmit="UpdateFrame(); return false;" method="NONE"><input type="text" name="bgguser" id="bgguser" width=20
   onclick="UpdateFrame();"><br>
 {{ user_control }}
</form>
<td>
Best with:
<select name="bestwith" id="bestwith" onChange="UpdateFrame();">
<option value="">any</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select>
<td>
Rec. with:
<select name="recwith" id="recwith" onChange="UpdateFrame();">
<option value="">any</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select>
<td>
Play Time:
<select name="playtime" id="playtime" onChange="UpdateFrame();">
<option value="">any</option>
<option value="5">5</option>
<option value="10">10</option>
<option value="15">15</option>
<option value="30">30</option>
<option value="45">45</option>
<option value="60">60</option>
<option value="90">90</option>
`<option value="120">120</option>
<option value="180">180</option>
<option value="240">240</option>
</select>
<td>
Weight:
<select name="weight" id="weight" onChange="UpdateFrame();">
<option value="">any</option>
<option value="1">light</option>
<option value="2">light-medium</option>
<option value="3">medium</option>
<option value="4">medium-heavy</option>
<option value="5">heavy</option>
</select>
<td>
<input type="button" value="Go!" onclick="UpdateFrame();">

</table>

<div class="gamelist" id="gamelist">
  To get started, type in a BGG username or select one from the pull-down
  and hit Go!
</div>

</body>
</html>
